import AppLogo from '@/components/AppLogo'
import darkTheme from '@/styles/dark-theme.js'
import lightTheme from '@/styles/light-theme.js'
import {useState} from 'react'
import {useSelector} from 'react-redux'
import {BrowserRouter} from 'react-router-dom'
import {ThemeProvider} from 'styled-components'
import AppMenu from './components/AppMenu'
import HeaderRight from './components/HeaderRight'
import Slider from './components/Slider'
import UserProfileContext from './context/userProfileContext'
import AppContent from './layouts/AppContent'
import AppHeader from './layouts/AppHeader'
import AppLayout from './layouts/AppLayout'
import APlayController from './pages/APlayController'
import BaseStyle from './styles/common'

function App() {
    const [profile, setProfile] = useState({})
    const theme = useSelector((state => state.theme.theme))
    return (<UserProfileContext.Provider value={{profile, setProfile}}>
        {/* theme css 变量的 */}
        <ThemeProvider theme={{...BaseStyle, ...(theme === 'dark' ? darkTheme : lightTheme)}}>
            <BrowserRouter className="App">
                <AppLayout>
                    <AppHeader slotRight={<HeaderRight/>} slotCenter={<AppMenu/>} slotLeft={<AppLogo/>}/>
                    <AppLayout>
                        <AppContent/>
                    </AppLayout>
                </AppLayout>
                <APlayController/>
            </BrowserRouter>
        </ThemeProvider>
    </UserProfileContext.Provider>)
}

export default App
